<template>
  <div class="material-upload-container">
    <div class="material-upload-header">
      <h2>上传材料</h2>
      <span @click="closeModal" class="close-button">×</span>
    </div>
    <div class="material-upload-form">
      <div class="form-group">
        <label for="teamName">
          <span class="required-star">*</span> 队伍名称：
        </label>
        <input type="text" id="teamName" v-model="teamForm.teamName" placeholder="请输入队伍名称" />
      </div>

      <div class="form-group">
        <label for="schoolName">学校名称：</label>
        <input type="text" id="schoolName" v-model="teamForm.schoolName" placeholder="请输入学校名称" />
      </div>

      <div class="form-group">
        <label for="college">学院：</label>
        <input type="text" id="college" v-model="teamForm.college" placeholder="请输入学院" />
      </div>

      <div class="form-group">
        <label for="teamSize">
          <span class="required-star">*</span> 团队人数：
        </label>
        <input type="number" id="teamSize" v-model.number="teamForm.teamSize" placeholder="请输入团队人数(不得超过100人)" :min="1" :max="100" />
      </div>

      <div class="form-group">
        <label for="applicationBatch">
          <span class="required-star">*</span> 母校行批次：
        </label>
        <div class="batch-selector" @click="showBatchOptions = !showBatchOptions">
          <span>{{ selectedBatch || '请选择批次' }}</span>
          <div class="batch-options" v-if="showBatchOptions">
            <div @click="selectBatch('春季')">春季</div>
            <div @click="selectBatch('秋季')">秋季</div>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="applicationReason">
          <span class="required-star">*</span> 母校行活动体验反馈：
        </label>
        <button class="upload-image-button" @click="showUploadPrompt">
          <img src="../../assets/11.jpg" alt="活力" class="custom-image" />
        </button>
        <textarea id="applicationReason" v-model="teamForm.applicationReason" placeholder="请输入申请母校行理由或活动方案" rows="5"></textarea>
      </div>

      <div class="form-actions">
        <button @click="cancelUpload" class="cancel-button">取消</button>
        <button @click="submitUpload" class="upload-button" :disabled="!canUpload">上传</button>
      </div>
    </div>

    <!-- 上传成功提示框 -->
    <div v-if="showSuccessModal" class="success-modal">
      <div class="modal-content">
        <div class="success-icon">✓</div>
        <h3>上传成功！</h3>
        <p>材料已成功提交</p>
        <button @click="closeSuccessModal">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MaterialUpload',
  data() {
    return {
      teamForm: {
        teamName: '',
        schoolName: '',
        college: '',
        teamSize: null,
        applicationBatch: '',
        applicationReason: ''
      },
      selectedBatch: '',
      showBatchOptions: false,
      batchOptions: ['春季', '秋季'],
      showSuccessModal: false // 控制成功提示框显示
    };
  },
  computed: {
    canUpload() {
      return this.teamForm.teamName &&
          this.teamForm.teamSize !== null &&
          this.teamForm.teamSize >= 1 &&
          this.teamForm.teamSize <= 100 &&
          this.selectedBatch &&
          this.teamForm.applicationReason;
    }
  },
  methods: {
    closeModal() {
      this.$emit('close');
    },
    selectBatch(batch) {
      this.selectedBatch = batch;
      this.showBatchOptions = false; // 选择后立即收起选项
      this.teamForm.applicationBatch = batch;
    },
    cancelUpload() {
      this.teamForm = {
        teamName: '',
        schoolName: '',
        college: '',
        teamSize: null,
        applicationBatch: '',
        applicationReason: ''
      };
      this.selectedBatch = '';
    },
    async submitUpload() {
      if (this.canUpload) {
        // 模拟上传请求
        try {
          // 实际项目中替换为真实API调用
          await new Promise(resolve => setTimeout(resolve, 1000));

          // 显示成功提示框
          this.showSuccessModal = true;
        } catch (error) {
          alert('上传失败: ' + error.message);
        }
      }
    },
    showUploadPrompt() {
      alert('请上传图片');
    },
    closeSuccessModal() {
      this.showSuccessModal = false;
      this.cancelUpload(); // 清空表单
      this.$emit('refresh'); // 通知父组件刷新表格
    }
  }
};
</script>

<style scoped>
.material-upload-container {
  position: relative;
  width: 600px;
  max-width: 90%;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.material-upload-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.close-button {
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

input, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 14px;
}

.batch-selector {
  position: relative;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 100%;
  display: inline-block;
}

.batch-options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: white;
  border: 1px solid #ddd;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.batch-options div {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.batch-options div:last-child {
  border-bottom: none;
}

.batch-options div:hover {
  background-color: #f5f5f5;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
}

.cancel-button, .upload-button {
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.cancel-button {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #333;
}

.upload-button {
  background-color: #4e9eff;
  border: none;
  color: white;
}

.upload-button:hover {
  background-color: #3b8edd;
}

.upload-button:disabled {
  background-color: #999;
  cursor: not-allowed;
}

.required-star {
  color: red;
  margin-right: 5px;
}

/* 自定义图片样式 */
.custom-image {
  width: 20px;
  height: auto;
}

/* 上传按钮样式 */
.upload-image-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 10px;
  display: block;
}

/* 成功提示框样式 */
.success-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  width: 300px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.success-icon {
  width: 60px;
  height: 60px;
  background-color: #4CAF50;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 36px;
  font-weight: bold;
}

.modal-content h3 {
  margin-bottom: 10px;
  color: #333;
}

.modal-content p {
  color: #666;
  margin-bottom: 20px;
}

.modal-content button {
  background-color: #4e9eff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  width: 100%;
}

.modal-content button:hover {
  background-color: #3b8edd;
}
</style>2
